<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Toggle help UI example</title>
    <style>
      :popover-open {
        position: absolute;
        inset: unset;
        bottom: 5px;
        right: 5px;
      }

      @media all and (max-width: 600px) {
        :popover-open {
          left: 5px;
        }
      }
    </style>
    <script src="index.js" defer></script>
  </head>
  <body>
    <button id="toggleBtn">Toggle popover help UI</button>

    <p id="keyboard-help-para">Click the above button or press "h" to get help with using our awesome app.</p>

    <div id="mypopover">
      <h2>Help!</h2>

      <p>You can use the following commands to control the app</p>

      <ul>
        <li>Press <ins>C</ins> to order cheese</li>
        <li>Press <ins>T</ins> to order tofu</li>
        <li>Press <ins>B</ins> to order bacon</li>
        <hr />
        <li>Say "Service" to summon the robot waiter to take your order</li>
        <li>Say "Escape" to engage the ejector seat</li>
      </ul>
    </div>
  </body>
</html>
